<template>
  <el-select v-model="checkList" :filterable="filterable" multiple collapse-tags placeholder="全部" :size="size" @change="handleCheckedChange" popper-class="custom-select" v-bind="$attrs">
    <div class="check-all" :class="{checked:checkAll}" @click="handleFakeCheckAll">
      <el-checkbox @click.native="e => e.stopPropagation()" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{checkAllLabel}}</el-checkbox>
    </div>
    <div class="line"></div>
    <el-checkbox-group v-model="checkList" @change="handleCheckedChange" :class="{'option-2rows': doubleColumn}">
      <el-option v-for="item in selOptions" :key="item[config.value]" :label="item[config.label]" :value="item[config.value]">
        <el-checkbox @click.native="e => e.stopPropagation()" :label="item[config.value]">{{item[config.label]}}</el-checkbox>
        <slot name="suffix" :item="item"/>
      </el-option>
    </el-checkbox-group>
  </el-select>
</template>

<script type="text/javascript">
export default {
  name: 'SelectCheckBox',
  components: {

  },
  model: {
    prop: 'checkedList',
    event: 'selectChange'
  },
  props: {
    checkedList: {
      type: [Array, String],
      required: true
    },
    props: Object,
    selOptions: {
      type: Array,
      required: true
    },
    checkAllLabel: {
      type: String,
      default: '全部'
    },
    doubleColumn: Boolean,
    size: {
      type: String,
      default: 'small'
    },
    filterable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkAll: false,
      isIndeterminate: false,
      checkList: []
    }
  },
  computed: {
    config () {
      return Object.assign({ value: 'value', label: 'label' }, this.props || {})
    }

  },
  methods: {
    handleFakeCheckAll () {
      const flag = !this.checkAll
      this.checkAll = flag
      this.handleCheckAllChange(flag)
    },
    handleCheckAllChange (val) {
      const checkedList = val ? this.selOptions.map(it => it[this.config.value]) : []
      this.isIndeterminate = false
      this.dispatchChangeEvent(checkedList)
    },
    handleCheckedChange (val) {
      this.setCheckBoxStatus()
      this.dispatchChangeEvent(this.checkList)
    },
    setCheckBoxStatus () {
      const maxLen = this.selOptions.length
      const len = this.checkList.length
      this.checkAll = maxLen && len === maxLen
      this.isIndeterminate = len > 0 && len < maxLen
    },
    dispatchChangeEvent (list) {
      this.$emit('selectChange', list)
      this.$emit('change', list)
    }
  },
  watch: {
    checkedList: {
      handler (newVal) {
        this.checkList = Array.isArray(newVal) ? newVal.slice() : []
        this.setCheckBoxStatus()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.custom-select {
  .check-all {
    padding: 0 20px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    &:hover {
      background-color: #f5f7fa;
    }
  }
  .option-2rows{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .line {
    margin: 6px 0;
    border-bottom: 1px solid #dcdfe6;
  }
  .color-mark {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid skyblue;
  }
  .el-select-dropdown__item{
    &.selected::after{
      display: none;
    }
  }
}
</style>
